<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全员工薪资统计</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">

<script src="../public/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<%if(session.getAttribute("user")==null){ %>
    <script>
		window.top.location.replace("../login.jsp");
	</script>
<%}%>
<div>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		<legend><h2>全员工薪资统计</h2></legend>
	</fieldset>
	<table class="layui-hide" id="demo" lay-filter="form"></table>
	
	<!-- 头部工具栏 -->
	<script type="text/html" id="search">
			模糊搜索：
		<div class="layui-inline">
	  	  <select id="condition" name="condition">
        	<option value=""></option>
			<option value="deptname">按部门</option>
        	<option value="rolename">按职位</option>
			<option value="userid">按员工编号</option>
		  </select>
	 	 </div>
  		<div class="layui-inline">
    		<input class="layui-input" id="conditionValue" name="conditionValue" autocomplete="off">
  		</div>
  			<button class="layui-btn" name="search" data-type="reload"  lay-event="search">搜索</button>
	</script>
<!-- 	职工状态 -->
	<script type="text/html" id="statusTpl">
		{{#  if(d.status == 0){ }}
   	 			<span style="color:#FF5722;">停职</span>
  		{{#  } else { }}
    	        <span style="color:#5FB878;">在职</span>
  		{{#  } }}
	</script>
<!-- 	薪资状态 -->
	<script type="text/html" id="salaryStatus">
		{{#  if(d.ispay == "0"){ }}
				<div style="color:#FF5722; ">暂未发放</div>
  		{{#  } else { }}
   	 			<div style="color:#009688; ">已发放</div>
  		{{#  } }}
	</script>
<!-- 	是否市场部 -->
	<script type="text/html" id="isShichang">
		
  		{{#  if(d.deptid == shichangbuId){ }}
				{{ d.commission}}
  		{{#  } else { }}
   	 			<div style="color:#FFB800; ">非市场部员工，不可有</div>
				
  		{{#  } }}
	</script>
	<script type="text/javascript">
	var shichangbuId = 50;
	layui.use(['table', 'jquery','form'],function(){
		$ = layui.jquery;
		var table = layui.table;
		var form = layui.form;
		
		var tableIns = table.render({
			elem: '#demo'
		    ,url: '../HumanServlet?button=3' //数据接口
		    ,toolbar: '#search'
		    ,page: true //开启分页
		    ,defaultToolbar:["print"]
		    ,cols: [[ //表头
		      {field: 'userid', title: '员工编号', width:120, sort: true,fixed:'left'}
		      ,{field: 'name', title: '员工姓名', width:200} 
		      ,{field: 'status', title: '员工状态', width:120, sort: true ,templet:'#statusTpl'}
		      ,{field: 'deptname', title: '所属部门', width:100}
		      ,{field: 'rolename', title: '职位', width: 180}
		      ,{field: 'basewages', title: '基本薪资<span style="color:#5FB878">(可改)</span>', width:150, sort: true,edit:'text'}
		      ,{field: 'overtimestandard', title: '加班薪资标准<span style="color:#5FB878">(可改)</span>', width:180, sort: true,edit:'text'} 
		      ,{field: 'leavestandard', title: '请假扣薪标准<span style="color:#5FB878">(可改)</span>', width:180, sort: true,edit:'text'} 
		      ,{field: 'absentstandard', title: '旷工扣薪标准<span style="color:#5FB878">(可改)</span>)', width:180, sort: true,edit:'text'} 
		      ,{field: 'ispay', title: '发放状态', width:200, sort: true ,templet:'#salaryStatus'}
		      ,{field: 'totalwages', title: '总薪资', width:200, sort: true}
		      ,{field: 'meritwages', title: '加成薪资', width:200, sort: true}
		      ,{field: 'punishingwages', title: '扣除薪资', width:200, sort: true}
		      ,{field: 'commission', title: '（市场部人员特有）销售提成', width:200, sort: true,templet:'#isShichang'}
		      ,{field: 'overtime', title: '普通加班时长（单位小时）', width:200, sort: true} 
		      ,{field: 'weekovertime', title: '周末加班时长（单位小时）', width: 200, sort: true}
		      ,{field: 'festovertime', title: '节假日加班时长（单位小时）', width: 220, sort: true}
		      ,{field: 'festivalwages', title: '节日福利', width:200, sort: true}
		      ,{field: 'yearendwages', title: '年终奖', width:200, sort: true} 
		      ,{field: 'leavecount', title: '请假次数', width:200, sort: true}
		      ,{field: 'absentcount', title: '旷工次数', width:200, sort: true}
		    ]]
		});
		//动态构建 部门的 下拉列表
// 		function selectDept(d){
// 			var selectItem = '<div><select lay-filter="deptrole" name="'+ d.userid +'" id="dept">\n';
// 			$.ajax({
// 				url:'../HumanServlet?button=4&getType=dept'
// 				,type:'post'
// 				,async:false
// 				,success:function(res){
// 					res = eval('('+res+')');
// 					var data = res.data;
// 					for(i in data){
// 						if(d.deptid == data[i].itemId){
// 							selectItem += '<option value="' + data[i].itemId + '" selected>' + data[i].itemName + '</option>\n';
// 						}else{
// 							selectItem += '<option value="' + data[i].itemId + '">' + data[i].itemName + '</option>\n';
// 						}
// 					}
// 					selectItem += '</select></div>';
// 					console.log(selectItem);
// 				}
// 			})
// 			return selectItem;
// 		};
// 		//动态构建 角色的 下拉列表
// 		function selectRole(d){
// 			var selectItem = '<div><select lay-filter="deptrole" name="'+ d.userid +'" id="role">\n';
// 			$.ajax({
// 				url:'../HumanServlet?button=4&getType=role'
// 				,type:'post'
// 				,async:false
// 				,success:function(res){
// 					res = eval('('+res+')');
// 					var data = res.data;
// 					for(i in data){
// 						if(d.roleid == data[i].itemId){
// 							selectItem += '<option value="' + data[i].itemId + '" selected>' + data[i].itemName + '</option>\n';
// 						}else{
// 							selectItem += '<option value="' + data[i].itemId + '">' + data[i].itemName + '</option>\n';
// 						}
// 					}
// 					selectItem += '</select></div>';
// 					console.log(selectItem);
// 				}
// 			})
// 			return selectItem;
// 		};
		 // 顶部工具栏事件 进行搜索
		table.on('toolbar(form)', function(obj){
// 			var checkStatus = table.checkStatus(obj.config.id);
			var data = obj.data;
			var conditionValue = $('#conditionValue');
			var condition = $('#condition');
		    //这里以搜索为例
			if(conditionValue.val().length != 0){
	    		  if(condition.val() == "deptname"){
		    		  layer.msg("按部门搜索到与<span style='color:#FFB800;'>\""+conditionValue.val()+"\"</span>相关结果如下！");
		    	  }else if(condition.val() == "rolename"){
		    		  layer.msg("按职位搜索到与<span style='color:#FFB800;'>\""+conditionValue.val()+"\"</span>相关结果如下！");
		    	  }else if(condition.val() == "userid"){
		    		  layer.msg("按员工编号搜索到与<span style='color:#FFB800;'>\""+conditionValue.val()+"\"</span>相关结果如下！");
		    	  }else{
		    		  layer.msg("请先选择搜索类型！");
//		    		  layer.msg(conditionValue.val().length); //看变量数据的长度，实测有效
		    	  }
	    	  }else{
	    		  layer.msg("正在显示全部！");
	    	  }
	    	tableIns.reload({
				url: '../HumanServlet?button=3'
				,where: { //设定异步数据接口的额外参数，任意设
					"condition": condition.val(),
					"conditionValue": conditionValue.val(),
// 					"page":"1",
// 					"limit":"10"
				}
			});
		});
// 		//监听下拉列表
// 		form.on('select(deptrole)',function(data){
// 			console.log(data);
// 			var object = data.elem.name;//修改对象
// 			var type = data.elem.id;	//修改的字段项
// 			var newvalue = data.value;	//字段新值
// 			console.log(object+type+newvalue);
// 			$.ajax({
// 				url:'../HumanServlet?button=5&type='+type+'&newvalue='+newvalue+'&object='+object
// 				,type:'post'
// 				,async:false
// 				,success:function(res){
// // 					console.log(res);
// 					layer.msg(res);
// 				}
// 			})
// 		});
// 		//监听switch职工状态
// 		form.on('switch(statusDemo)', function(obj){
// // 		    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
// 		    var object = this.value;	//对象
// 		    var type = this.name;		//字段
// 		    var newvalue = obj.elem.checked==true?1:0;	//新值
// 		    console.log(object+type+newvalue);
// 		    $.ajax({
// 				url:'../HumanServlet?button=5&type='+type+'&newvalue='+newvalue+'&object='+object
// 				,type:'post'
// 				,async:false
// 				,success:function(res){
// // 					console.log(res);
// 					layer.msg(res);
// 				}
// 			})
// 		});
		//单元格编辑事件
		table.on('edit(form)', function(obj){
			var object = obj.data.userid;
			var type = obj.field;
			var newvalue = obj.value;
			console.log(object+type+newvalue);
			$.ajax({
				url:'../HumanServlet?button=5&type='+type+'&newvalue='+newvalue+'&object='+object
				,type:'post'
				,async:false
				,success:function(res){
// 					console.log(res);
					layer.msg(res);
				}
			})
		});
	});
	</script>
</div>
</body>
</html>